<template>
    <div class="publisher-video">

        <div style="margin: 20px" />
        <el-form label-width="auto" :model="videoParams" style="max-width: 600px">
            <el-form-item label="视频">
                <el-upload style="width:100%;" class="upload-demo" drag :action="uploadUrl" :on-success="uploadSuccessEvent">
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                    <div class="el-upload__text">
                        拖动文件或者<em>点击这里</em>
                    </div>
                    <template #tip>
                        <div class="el-upload__tip">
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="videoParams.title" />
            </el-form-item>
            <el-form-item label="描述">
                <el-input v-model="videoParams.description" />
            </el-form-item>
            <el-form-item label="封面">
                <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                    :on-success="handleAvatarSuccess" >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>

        <el-button type="primary" @click="clickPublisherEvent">发布</el-button>
    </div>
</template>

<script setup>
import { UploadFilled } from '@element-plus/icons-vue'
import { inject, reactive, ref } from 'vue'
import { publisherVideo } from "@/api/short-video-server/short-video"
import { ElMessage } from 'element-plus'

const uploadUrl = inject('uploadUrl')

const imageUrl = ref("")

const videoParams = reactive({
    title: '',
    description: '',
    playUrl: '',
    coverUrl: '',
})

function uploadSuccessEvent(res) {
    videoParams.playUrl = res.data.url
}

function handleAvatarSuccess(res) {
    
    videoParams.coverUrl = res.data.url

    imageUrl.value = videoParams.coverUrl
}



function clickPublisherEvent() {
    let data = {
        title: videoParams.title,
        description: videoParams.description,
        playUrl: videoParams.playUrl,
        coverUrl: videoParams.coverUrl,
    }
    publisherVideo(data)
        .then(res => {
            if (res.code == 200) {
                videoParams.title = ''
                videoParams.description = ''
                videoParams.playUrl = ''
                videoParams.coverUrl = ''
            } else ElMessage.error(res.msg)
        })
}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.publisher-video{
    padding:10px 20px;
    background: linear-gradient(89deg, #111010, #312626, #0a0707);
    /* border:2px solid brown; */
    border-radius: 8px;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>